{% extends "base.html" %}

{% block title %}我的预约 - 车辆管理系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row mb-4">
        <div class="col">
            <h2>我的预约</h2>
            <p class="text-muted">查看和管理您的停车位预约</p>
        </div>
        <div class="col-auto d-flex align-items-center">
            <a href="{{ url_for('reserve_parking_form') }}" class="btn btn-primary me-2">
                <i class="fas fa-plus"></i> 新增预约
            </a>
            <a href="{{ url_for('user_dashboard') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回仪表板
            </a>
        </div>
    </div>
    
    {% if reservations %}
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>车牌号</th>
                                <th>停车场</th>
                                <th>预约时间</th>
                                <th>有效期至</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for reservation in reservations %}
                                <tr>
                                    <td>{{ reservation.plate_number }}</td>
                                    <td>{{ reservation.parking_lot_name }}</td>
                                    <td>{{ reservation.reservation_time.strftime('%Y-%m-%d %H:%M') }}</td>
                                    <td>{{ reservation.expiration_time.strftime('%Y-%m-%d %H:%M') }}</td>
                                    <td>
                                        <span class="badge bg-success">有效</span>
                                    </td>
                                    <td>
                                        <form action="{{ url_for('cancel_reservation', reservation_id=reservation.id) }}" method="post" class="d-inline">
                                            <button type="submit" class="btn btn-sm btn-warning" onclick="return confirm('确定要取消此预约吗？')">
                                                取消预约
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% else %}
        <div class="card">
            <div class="card-body text-center py-5">
                <img src="{{ url_for('static', filename='img/calendar-empty.svg') }}" alt="无预约" style="width: 100px; opacity: 0.5;" class="mb-3">
                <h4 class="text-muted">暂无有效预约</h4>
                <p>您当前没有任何有效的停车位预约</p>
                <a href="{{ url_for('reserve_parking_form') }}" class="btn btn-primary">
                    <i class="fas fa-calendar-plus"></i> 立即预约停车位
                </a>
            </div>
        </div>
    {% endif %}
    
    <div class="card mt-4">
        <div class="card-header bg-light">
            <h5 class="mb-0">预约须知</h5>
        </div>
        <div class="card-body">
            <ul class="mb-0">
                <li>预约有效期为所选时间起的2小时内</li>
                <li>超过有效期未使用的预约将自动失效</li>
                <li>进入停车场时，系统会自动核验您的预约信息</li>
                <li>如需修改预约，请先取消当前预约，再重新预约</li>
                <li>高峰时段建议提前预约，以确保车位可用</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %} 